<template>
	<div>
		<el-dialog :title="title" :visible.sync="dialogVisible" width="85%" @close="handleClose">

			<el-row :gutter="10">
				<el-col :span="24">
					<el-form :inline="true" :model="params" ref="params" class="demo-form-inline sarchForm" size="small"
						@submit.native.prevent>
						<el-form-item label="姓名">
							<el-input @keyup.enter.native="handleSubmit" v-model="params.name"
								placeholder="姓名"></el-input>
						</el-form-item>
						<el-form-item label="类型">
							<el-select v-model="params.kind" placeholder="类型">
								<el-option label="认证个人" value="0"></el-option>
								<el-option label="认证机构" value="1"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="状态">
							<el-select v-model="params.status" placeholder="审核状态">
								<el-option label="待审核" value="0"></el-option>
								<el-option label="已通过" value="1"></el-option>
								<el-option label="已驳回" value="2"></el-option>
								<el-option label="已移除" value="3"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="handleSubmit">查询</el-button>
							<el-button @click="handleReset">重置</el-button>
							<!-- <el-button @click="handleAdd('add', cateInfo)" type="primary" icon="el-icon-plus">新增</el-button>
							<el-button size="small" @click="batchDelete()" plain type="danger">批量删除</el-button> -->
						</el-form-item>
						<el-form-item>
							<!-- <el-button size="small" @click="batchTransfer()" plain type="success">批量转移</el-button> -->
						</el-form-item>
					</el-form>
			
					<el-table v-loading="loading" :row-key="getKey" :data="newData" style="width: 100%"
						:header-cell-style="{ background: '#f0f2f5' }" ref="tableRef" @selection-change="changeSelect">
						<!-- <el-table-column type="selection" width="55" reserve-selection :selectable="judgeSelect">
						</el-table-column> -->
						<el-table-column label="序号" type="index"></el-table-column>
						<el-table-column prop="name" label="成员姓名" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="individualDto" label="联系电话" show-overflow-tooltip>
							<template slot-scope="scope">
								<span>{{scope.row.individualDto.contactPerson}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="kind" label="类型">
							<template slot-scope="scope">
								<span v-if="scope.row.kind === '0'" style="color:#409EFF">个人</span>
								<span v-if="scope.row.kind === '1'" style="color:#e6a23c">机构</span>
							</template>
						</el-table-column>
						<el-table-column prop="status" label="状态">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.status === '0'" type="warning">待审核</el-tag>
								<el-tag v-if="scope.row.status === '1'" type="success">已通过</el-tag>
								<el-tag v-if="scope.row.status === '2'" type="danger">已驳回</el-tag>
								<el-tag v-if="scope.row.status === '3'" type="info">已移除</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="individualDto" label="专业领域" show-overflow-tooltip>
							<template slot-scope="scope">
								<span>{{scope.row.individualDto.managerIntroduction}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="createTime" label="报名时间" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="opinion" label="审核意见" show-overflow-tooltip>
							<template slot-scope="scope">
								<span v-if="scope.row.status === '2'">{{ scope.row.opinion }}</span>
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="250">
							<template slot-scope="scope">
								<el-button :disabled="scope.row.status === '1' || scope.row.status === '2'|| scope.row.status === '3'"
									@click="handleAgree(scope.row)" type="text" size="small">通过</el-button>
								<el-button :disabled="scope.row.status === '1' || scope.row.status === '2'|| scope.row.status === '3'"
									@click="hanldeDis(scope.row)" type="text" size="small">驳回</el-button>
								<el-button :disabled="scope.row.status === '0' || scope.row.status === '2'"
									@click="handleMove(scope.row)" type="text" size="small">移除</el-button>
								<!-- <el-button
									:disabled="scope.row.status === '0' || scope.row.status === '2' || scope.row.status === '3' || scope.row.status === '4'"
									@click="handleLower(scope.row)" type="text" size="small">下架</el-button> -->
								<!-- <el-button
									@click="handleMember(scope.row)" type="text" size="small">成员管理</el-button> -->	
								<!-- <el-button v-if="cateInfo.cateName === '高新优品'"
									@click="handleaDetail(scope.row.id, cateInfo.cateName)" type="text"
									size="small">详情</el-button>
								<el-button v-if="cateInfo.cateName !== '高新优品'" @click="handleDetail(scope.row.id)"
									type="text" size="small">详情</el-button> -->
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页 -->
					<div class="poolPage">
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="params.page" :page-sizes="[10, 20, 30]" :page-size="params.pageSize"
							layout="total, sizes, prev, pager, next, jumper" :total="total">
						</el-pagination>
					</div>
				</el-col>
			</el-row>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import {
		getNewOptions,
		getNewDetail
	} from "@/request/api/new"
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue'
	import {
		getUploadImg
	} from "@/request/api/link"
	import {
		myTopicMemberList,
		myTopicMemberAudit,
		myTopicAdd
	} from "@/request/api/topic";
	import {
		getAllianceOptions
	} from "@/request/api/innovationConsortium";
	import {
		getKey
	} from "@/request/api/planPromotion";
	import rulesUtil from "@/utils/rules" //引入
	export default {
		components: {
			Editor,
			Toolbar
		},
		data() {
			return {
				isWrite: false,
				checked: false,
				dialogVisible: false,
				type: "",
				title: "",
				activeName: '1',
				
				imgUrl: '',
				
				selectCate: {
					checkStrictly: true,
					label: "name",
					children: "childs",
					value: "name",
					getCheckedNodes: true,
					expandTrigger: "hover",
				},
				dataTree: [],
				fileAll: [],
				imageUploadUrl: '/dev-api/file/upload/uploadNotQR',
				editor: null,
				toolbarConfig: { //工具栏配置
					excludeKeys: [
						'insertTable', //插入表格
					]
				},
				editorConfig: {
					placeholder: '请输入内容...',
					// 所有的菜单配置，都要在 MENU_CONF 属性下
					MENU_CONF: {
						//配置上传图片
						uploadImage: {
							customUpload: this.uploadImg,
						},
						//配置上传视频
						uploadVideo: {
							customUpload: this.uploadVideo
						}
					},
				},
				mode: 'default', // or 'simple'
				loading: true,

				params: {
					page: 1,
					pageSize: 10,
					collectingId:"",
					name: "", //姓名
					kind: "", //类型(0 认证个人,1 认证机构)
					status:"",//状态(0 待审核,1 已通过,2 已驳回,3 已移除)
				},
				newData: [],
				total: 0,
				multipleSelection: [], //批量选择
			};
		},
		methods: {
			open(id) {
				//使用富文本的清空方法clear，来清空富文本数据。
				// proxy.$refs['itemRef'].clear();
				this.loading = false
				this.dialogVisible = true;
				this.title = "成员管理";
				this.params.collectingId = id
				this.getNewList()
			},
			// 获取列表
			getNewList() {
				this.newData =[]
				this.loading = true
				myTopicMemberList(this.params).then((res) => {
					this.loading = false
					if (res.data.code === 200) {
						this.newData = res.data.result.items;
						this.total = res.data.result.total;
					}
				});
			},
			// 查询
			handleSubmit() {
				this.params.page = 1;
				this.getNewList();
			},
			// 重置
			handleReset() {
				this.params.page = 1;
				this.params.name = null;
				this.params.kind = null;
				this.params.status = null;
				this.getNewList();
			},
			handleSizeChange(val) {
				this.params.pageSize = val;
				this.params.page = 1;
				this.getNewList();
			},
			handleCurrentChange(val) {
				this.params.page = val;
				this.getNewList();
			},
			// 选择左侧复选框
			changeSelect(val) {
				this.multipleSelection = val;
			},
			getKey(row) {
				return row.id;
			},
			// 判断表格每一行的 CheckBox 是否可以勾选
			judgeSelect(row, index) {
				return true; // 返回true该行可选，返回false则不可选
			},
			// 通过
			handleAgree(info){
				this.$confirm("确定通过审核吗?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.getAdd({
						id: info.id,
						status: 1
					});
				});
			},
			// 驳回
			hanldeDis(info){
				this.$prompt('确定驳回审核吗', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPlaceholder:'输入审核意见'
				}).then(({ value }) => {
					this.getAdd({
						id: info.id,
						status: 2,
						opinion:value
					});
				}).catch(() => {
				});
			},
			// 移除
			handleMove(info){
				this.$confirm("确定移除该成员吗?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.getAdd({
						id: info.id,
						status: 3
					});
				});
			},
			// 修改接口
			getAdd(params){
				myTopicMemberAudit(params).then((res) => {
					if (res.data.code === 200) {
						this.$message({
							message: res.data.message,
							type: "success",
						});
						// this.dialogVisible = false
						this.getNewList();
					} else {
						this.$message.error(res.data.message);
					}
				});
			},
			// 只输入数字
			inputChange() {
				this.form.contactPerson = this.form.contactPerson.replace(/[^\d]/g, '')
			},
			// 选择来源
			changeLink(val) {
				// if(){}
			},
			handleClose() {
				// this.$emit('getNewList')
				this.$refs.form.resetFields();
				const editor = this.editor
				if (editor == null) return
				editor.destroy() // 组件销毁时，及时销毁编辑器

			},
			// 父级
			selectValue() {
				this.$refs.cascader.dropDownVisible = false;
			},
			// 创建
			submitForm(val) {
				this.$refs.form.validate((valid) => {
					if (valid) {
						const loading = this.$loading({
							lock: true,
							text: 'Loading',
							spinner: 'el-icon-loading',
							background: 'rgba(0, 0, 0, 0.7)'
						});
						if (this.type === 'add') {
							this.form.status = val
							this.form.startTime = this.form.timeArr[0]
							this.form.endTime = this.form.timeArr[1]
							myTopicAdd(this.form).then((res) => {

								loading.close();
								if (res.data.code === 200) {
									this.$message({
										message: res.data.message,
										type: "success",
									});
									this.$emit('getNewList')
									this.dialogVisible = false

								} else {
									this.$message.error(res.data.message);
								}
							});
						} else if (this.type === 'edit') {
							this.form.status = val
							this.form.startTime = this.form.timeArr[0]
							this.form.endTime = this.form.timeArr[1]
							myTopicAdd(this.form).then((res) => {

								loading.close();
								if (res.data.code === 200) {
									this.$message({
										message: res.data.message,
										type: "success",
									});
									this.$emit('getNewList')
									this.dialogVisible = false

								} else {
									this.$message.error(res.data.message);
								}
							});
						}

					} else {
						return false;
					}
				});
			},
			// 获取详情
			getDetail(id) {
				myTopicListDetail(id).then(res => {
					if (res.data.code === 200) {
						// this.form = res.data.result
						var list = res.data.result.fileDtos
						if (list.length !== 0) {
							list.forEach(item => {
								this.fileAll.push({
									name: item.name,
									filePath: item.filePath,
								});
							})
							list.forEach(item => {
								this.form.fileDtos.push({
									name: item.name,
									filePath: item.filePath,
								});
							})
						}
						this.loading = false
					}
				})
			},
			// 限制上传的类型
			beforeAvatarUpload(file) {
				const isLt10M = file.size / 1024 / 1024 < 10;
				if (!isLt10M) {
					this.$message.error("上传图片大小不能超过 10M!");
					return false;
				}
				var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
				const extension = testmsg === "jpg" || testmsg === "JPG";
				const extension2 = testmsg === "png" || testmsg === "PNG";
				if (!extension && !extension2) {
					this.$message({
						message: "上传图片只能是 jpg, png格式!",
						type: "error",
					});
					return false;
				}
			},
			// 上传文件成功
			handleAvatarSuccess(response, file) {
				this.imgUrl = URL.createObjectURL(file.raw);
				this.form.thumb = response.message;
				this.$refs.headimgUpload1.clearValidate(); // 关闭校验
			},
			// 上传文件失败
			handleError(err) {
				let errInfo = JSON.parse(err["message"]);
				this.$message.error(`文件上传失败，原因:${errInfo.message}`);
			},
			//附件上传方法结束
			onEditorChange({
				editor,
				html,
				text
			}) {
				this.form.content = html;
			},
			// 上传文件成功
			handleAvatarSuccess6(response, file) {
				let params = {
					name: file.name,
					filePath: file.response.message,
				}
				this.form.fileDtos.push(params);
			},
			// 上传文件失败
			handleError6(err) {
				let errInfo = JSON.parse(err["message"]);
				this.$message.error(`文件上传失败，原因：${errInfo.message}`);
			},
			//删除上传的文件
			handleRemove6(response, file, fileList) {
				var dataList = this.form.fileDtos;
				for (var i = 0; i < dataList.length; i++) {
					if (dataList[i].name.indexOf(response.name) > -1) {
						var index = i;
						dataList.splice(index, 1); //存在即删除
					}
				}
				this.form.fileDtos = dataList
			},

			// 富文本
			onCreated(editor) {
				this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
			},
			// 富文本-上传图片
			uploadImg(file, insertFn) {
				let imgData = new FormData();
				imgData.append('file', file);
				//调接口，上传图片
				getUploadImg(imgData).then(response => {
					if (response.data.code == 200) {
						insertFn(response.data.message);
					} else {
						this.$message.error(response.data.message);
					}
				})
			},
			// 富文本-上传视频
			uploadVideo(file, insertFn) {
				let imgData = new FormData();
				imgData.append('file', file);
				//调接口，上传图片
				getUploadImg(imgData).then(response => {
					if (response.data.code == 200) {
						insertFn(response.data.message);
					} else {
						this.$message.error(response.data.message);
					}
				})
			}
		},
		// 生命周期-离开当前页面路由
		beforeDestroy() {
			const editor = this.editor
			if (editor == null) return
			editor.destroy() // 组件销毁时，及时销毁编辑器
		},

	};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="less" scoped>
	::v-deep .ql-editor {
		min-height: 200px;
	}

	.el-input {
		width: 420px;
	}

	.el-cascader {
		width: 420px;
	}

	.el-textarea {
		width: 420px;
	}

	.el-select {
		width: 420px;
	}

	/deep/.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
	}

	.avatar {
		width: 120px;
		height: 120px;
		display: block;
		object-fit: contain;
	}

	.newDesc {
		position: relative;

		.el-checkbox {
			position: absolute;
			top: 14.5%;
			left: 11%;
		}
	}

	.ql-toolbar {
		position: fixed;
	}
	.el-input {
		width: 220px;
	}
	.el-select {
		width: 220px;
	}
	.poolPage {
		margin-top: 15px;
		text-align: right;
	}
</style>